import { FiledChildProps } from "@/types";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { Button, Space } from "antd";
import { useState } from "react";
import { ReactAceEditor } from "@/components/common/ReactAceEditor.tsx";
import { HttpOptions } from "@meta2d/core";

export const Http = ({ onStoreDataChange }: FiledChildProps) => {
  const [open, setOpen] = useState(false);
  const [httpArr, setHttpArr] = useState<HttpOptions[]>([]);

  return (
    <div style={{ padding: "10px" }}>
      <Space direction="vertical" style={{ width: "100%" }}>
        <ReactAceEditor
          tip={`<div>
        <p>store.data.https[i].http = url;//设置url</p>
        <p>store.data.https[i].method="POST"|"GET"; //设置请求方式</p>
        <p>
          store.data.https[i].httpTimeInterval = 500; // 轮询间隔时间, 默认 1000
        </p>
        <p>store.data.https[i].httpHeaders = {}; // 设置请求头</p>
      </div>`}
          open={open}
          onCancel={() => setOpen(false)}
          onOk={(codeText) => {
            onStoreDataChange("https", eval(codeText));
            setOpen(false);
            window.meta2d.connectHttp();
          }}
          value={JSON.stringify(httpArr)}
        ></ReactAceEditor>

        <FormRowCol label="编辑" illustrate={"添加多个http配置"}>
          <Space>
            <Button
              type="primary"
              onClick={() => {
                setHttpArr(() => window.meta2d.store.data.https || []);
                setOpen(true);
              }}
            >
              配置
            </Button>
          </Space>
        </FormRowCol>
      </Space>
    </div>
  );
};
